<script setup>
import axios from 'axios';
import {onMounted, ref, reactive} from 'vue'
import {get, post} from '@/net/index.js'
import * as echarts from 'echarts';

let user= ref({});
let interfaceInfoList = ref([]);
let interfaceNameList = ref([]);
let interfaceNumList = ref([]);
let formattedDate= ref({});
let defaultPage= ref(true);
const showKey = ref(false);


// 初始化柱状图
const initHistogram = () => {
    // 获取开通接口的名称,接口调用次数
    interfaceInfoList.value.forEach((item) =>{
        interfaceNameList.value.push(item.interfaceInfo.name);
        interfaceNumList.value.push(item.calledNum);
    })

    var chartDom = document.getElementById('histogram');
    var myChart = echarts.init(chartDom);
    var option= {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            }
        },
        color: [
            '#91CC75'
        ],
        xAxis: {
            type: 'category',
            data: interfaceNameList.value,
            axisLabel: {
                formatter: function (value, index) {
                    if(value.length>5) {
                        return value.substr(0,4)+'..'
                    } else {
                        return value
                    }
                }
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: interfaceNumList.value,
                type: 'bar'
            }
        ],
    };

    myChart.setOption(option);
}
// 初始化饼图
const initPieChart = () => {
    // 将 interfaceNumList 和 interfaceNameList 结合成新的数据结构
    let combinedList = interfaceNameList.value.map((name, index) => {
        return { value: interfaceNumList.value[index], name: name };
    });

    var chartDom = document.getElementById('pieChart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: combinedList
            }
        ]
    };

    myChart.setOption(option);
}

onMounted(() => {
    var userInfo = JSON.parse(localStorage.getItem('loggedUser'));

    get('/api/user/getLoginUser',
        (data) => {
            user.value = data;
            // 将时间字符串转换为 Date 对象
            let date = new Date(user.value.createTime);

            // 提取年、月、日
            let year = date.getFullYear();
            let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，并且确保两位数显示
            let day = date.getDate().toString().padStart(2, '0'); // 确保两位数显示

            // 拼接成所需的形式
            formattedDate.value = `${year}-${month}-${day}`;

            post('/api/userInterfaceInfo/list',
                {
                    userId: userInfo.id,
                },
                (data) => {
                    interfaceInfoList.value = data
                    if (interfaceInfoList.value.length > 0) {
                        defaultPage.value = false
                    }
                    initHistogram();
                    initPieChart();
                }
            );
        });
});
</script>

<template>
    <div class="aboutMe">
        <!--个人信息卡片-->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span style="font-weight: bold;font-size: 20px;display: flex;justify-items: center;align-items: center">
                        <el-icon size="40" style="margin: 0 10px"><Postcard /></el-icon>
                        个人信息
                    </span>
                </div>
            </template>
            <div style="font-family: shangshou;font-size: 17px;font-weight: bold">
                <div class="user-dataTag">
                    <el-icon>
                        <User/>
                    </el-icon>
                    <span>我的名称&nbsp;：</span>
                    <span style="color: #409EFF" v-text="user.username"></span>
                </div>
                <el-divider/>
                <div class="user-dataTag">
                    <el-icon>
                        <Message/>
                    </el-icon>
                    <span>我的邮箱&nbsp;：</span>
                    <span style="color: #409EFF" v-text="user.usermail"></span>
                </div>
                <el-divider/>
                <div class="user-dataTag">
                    <el-icon>
                        <Compass/>
                    </el-icon>
                    <span>我的角色&nbsp;：</span>
                    <span style="color: #409EFF" v-if="user.userRole == 'admin'">管理员</span>
                    <span style="color: #409EFF" v-if="user.userRole == 'user'">普通用户</span>
                </div>
                <el-divider/>
                <div class="user-dataTag">
                    <el-icon>
                        <Clock/>
                    </el-icon>
                    <span>注册时间&nbsp;：</span>
                    <span style="color: #409EFF" v-text="formattedDate"></span>
                </div>
            </div>
        </el-card>
        <!--密钥信息卡片-->
        <el-card class="box-card-key">
            <template #header>
                <div class="card-header">
                    <span style="font-weight: bold;font-size: 20px;display: flex;justify-items: center;align-items: center">
                        <el-icon size="40" style="margin: 0 10px"><Key /></el-icon>
                        密钥信息
                    </span>
                </div>
            </template>
            <div style="font-family: shangshou;font-size: 17px;font-weight: bold">
                <div class="user-dataTag">
                    <el-icon>
                        <Lock/>
                    </el-icon>
                    <span>accessKey&nbsp;：</span>
                    <span style="color: #F56C6C" v-if="!showKey">******************************</span>
                    <span style="color: #F56C6C" v-if="showKey" v-text="user.accessKey"></span>
                </div>
                <el-divider/>
                <div class="user-dataTag">
                    <el-icon>
                        <Lock/>
                    </el-icon>
                    <span>secretKey&nbsp;：</span>
                    <span style="color: #F56C6C" v-if="!showKey">******************************</span>
                    <span style="color: #F56C6C" v-if="showKey" v-text="user.secretKey"></span>
                </div>
            </div>
            <template #footer>
                <el-button type="primary" @click="showKey = !showKey" >查看密钥</el-button>
            </template>
        </el-card>
    </div>

    <div class="aboutMe">
        <!--我的接口卡片-->
        <el-card class="box-card-interface">
            <template #header>
                <div class="card-header">
                    <span style="font-weight: bold;font-size: 20px;display: flex;justify-items: center;align-items: center">
                        <el-icon size="40" style="margin: 0 10px"><Open /></el-icon>
                        我的接口
                    </span>
                </div>
            </template>
            <div class="default-page" v-show="defaultPage">
                <img style="display: block;margin: 0 auto" width="250px" height="250px" src="../../../public/img/defaultSearchPageIcon.png">
                <span class="default-slogan" >暂无开通的接口</span>
            </div>
            <el-scrollbar height="320px" v-show="!defaultPage">
                <template v-for="(data,index) in interfaceInfoList" :key="index">
                    <div class="my-interface">
                        <span style="width: 150px;margin: 0 10px;">
                            <el-text style="color: #409EFF;font-family: shangshou;font-weight: bold;font-size: 20px" truncated>{{data.interfaceInfo.name}}</el-text>
                        </span>
                        <span style="width: 120px;margin: 0 10px;font-family: shangshou;font-weight: bold;font-size: 16px">
                            累计次数：
                            <span style="color:#c45656;">
                                {{data.calledNum}}
                            </span>
                        </span>
                        <span style="width: 120px;margin: 0 10px;font-family: shangshou;font-weight: bold;font-size: 16px">
                            剩余次数：
                            <span style="color:#529b2e;">
                                {{data.leftNum}}
                            </span>
                        </span>
                    </div>
                </template>
            </el-scrollbar>
            <template #footer>
                共计:
                <span style="color: #337ecc;font-family: shangshou;font-weight: bold;font-size: 20px">
                    {{interfaceInfoList.length}}
                </span>
                个
            </template>
        </el-card>
        <!--接口统计卡片-->
        <el-card class="box-card-interface-total">
            <template #header>
                <div class="card-header">
                    <span style="font-weight: bold;font-size: 20px;display: flex;justify-items: center;align-items: center">
                        <el-icon size="40" style="margin: 0 10px"><DataAnalysis /></el-icon>
                        接口统计
                    </span>
                </div>
            </template>
            <div class="interface-statistics">
                <div class="statistics-block">
                    <div class="default-chart" v-show="defaultPage">
                        <img style="display: block;margin: 0 auto" width="250px" height="250px" src="../../../public/img/defaultPageIcon.png">
                        <span class="default-slogan" >暂无开通的接口</span>
                    </div>
                    <div id="histogram" v-show="!defaultPage">

                    </div>
                </div>
                <div class="statistics-block">
                    <div class="default-chart" v-show="defaultPage">
                        <img style="display: block;margin: 0 auto" width="250px" height="250px" src="../../../public/img/defaultPageIcon.png">
                        <span class="default-slogan" >暂无开通的接口</span>
                    </div>
                    <div id="pieChart" v-show="!defaultPage">

                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<style scoped>
@font-face {
    font-family: "Sphere fez"; /* 定义字体名称 */
    src: url('/src/assets/font/spherefez-ezxam.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}

@font-face {
    font-family: "shangshou"; /* 定义字体名称 */
    src: url('/src/assets/font/上首简黑极细体.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}

.aboutMe {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 420px;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 10px;
}

.box-card-key {
    width: 950px;
    margin-top: 20px;
    margin-left: 70px;
    margin-right: 20px;
    border-radius: 10px;
}

.box-card-interface {
    width: 420px;
    height: 500px;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 10px;
}

.box-card-interface-total {
    width: 950px;
    height: 500px;
    margin-top: 20px;
    margin-left: 70px;
    margin-right: 20px;
    border-radius: 10px;
}

.user-dataTag {
    display: flex;
    flex-direction: row;
    justify-items: center;
}

.user-dataTag span {
    margin-left: 5px;
}

.my-interface {
    width: 100%;
    height: 50px;
    background: #ecf5ff;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin: 10px 0;
    border-radius: 5px;
    cursor: pointer;
}

.interface-statistics {
    display: flex;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
    font-family: shangshou;
    font-size: 17px;
    font-weight: bold
}

.statistics-block {
    width: 450px;
    height: 360px;
}

.default-chart {
    width: 450px;
    height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

#histogram {
    width: 450px;
    height: 360px;
}

#pieChart {
    width: 450px;
    height: 360px;
}

.default-page {
    width: 380px;
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.default-slogan {
    display: block;
    font-family: shangshou;
    font-weight: bold;
    font-size: 30px;
    letter-spacing: 5px;
    color: #79bbff
}
</style>